<template>
  <div class="search-container">
    <div class="search-wrapper">
      <div class="search-box">
        <div class="engine-selector" @click="toggleDropdown" ref="engineSelector">
          <img :src="currentEngineIcon" :alt="currentEngine" class="engine-icon">
          <div class="dropdown" :class="{ active: isDropdownOpen }">
            <div 
              v-for="(url, engine) in searchEngines" 
              :key="engine"
              class="dropdown-item"
              :class="{ active: currentEngine === engine }"
              @click.stop="selectEngine(engine)"
            >
              <img :src="engineIcons[engine]" :alt="engine">
              <span>{{ engineNames[engine] }}</span>
            </div>
          </div>
        </div>
        <input 
          type="text" 
          v-model="searchQuery"
          :placeholder="'在' + engineNames[currentEngine] + '中搜索'"
          @keyup.enter="handleSearch"
          ref="searchInput"
        >
        <button type="button" @click="handleSearch">
          <svg viewBox="0 0 24 24" width="18" height="18">
            <path fill="none" stroke="currentColor" stroke-width="2" 
                  d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Search',
  data() {
    return {
      searchQuery: '',
      currentEngine: 'baidu',
      isDropdownOpen: false,
      searchEngines: {
        baidu: 'https://www.baidu.com/s?wd=',
        google: 'https://www.google.com/search?q=',
        sogou: 'https://www.sogou.com/web?query='
      },
      engineNames: {
        baidu: '百度',
        google: '谷歌',
        sogou: '搜狗'
      },
      engineIcons: {
        baidu: '',
        google: '',
        sogou: ''
      }
    }
  },
  computed: {
    currentEngineIcon() {
      return this.engineIcons[this.currentEngine]
    }
  },
  methods: {
    handleSearch() {
      if (!this.searchQuery.trim()) return
      const baseUrl = this.searchEngines[this.currentEngine]
      const searchUrl = baseUrl + encodeURIComponent(this.searchQuery)
      window.open(searchUrl, '_blank')
    },
    toggleDropdown() {
      this.isDropdownOpen = !this.isDropdownOpen
    },
    selectEngine(engine) {
      this.currentEngine = engine
      this.isDropdownOpen = false
      this.$refs.searchInput.focus()
    }
  },
  mounted() {
    document.addEventListener('click', (e) => {
      if (!this.$refs.engineSelector.contains(e.target)) {
        this.isDropdownOpen = false
      }
    })
  },
  beforeUnmount() {
    document.removeEventListener('click', this.closeDropdown)
  }
}
</script>

<style scoped>
.search-container {
  background: transparent;
  justify-content: center;
  align-items: center;
  display: flex;
}



.search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50px;
  padding: 0.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-box:hover {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 26px 25px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.engine-selector {
  position: relative;
  padding: 0.5rem;
  margin-right: 0.5rem;
  cursor: pointer;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  display: flex;
  align-items: center;
}

.engine-icon {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
  -webkit-user-drag: none;
}

.engine-selector:hover .engine-icon {
  transform: scale(1.1);
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 0.5rem;
  margin-top: 1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  width: 100px;
}

.dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.dropdown-item img {
  width: 20px;
  height: 20px;
  margin-right: 0.75rem;
}

.dropdown-item:hover {
  background: rgba(245, 245, 245, 0.8);
}

.dropdown-item.active {
  background: rgba(240, 240, 240, 0.8);
  margin: .4rem 0;
}

.search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  padding: 0.5rem;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

.search-box button {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: #666;
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  outline: none;
}

.search-box button:hover {
  color: #4a90e2;
  transform: scale(1.1);
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .search-container {
    background: transparent;
  }

  .search-box {
    background: rgba(45, 45, 45, 0.8);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }

  .search-box:hover {
    background: rgba(45, 45, 45, 0.95);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
  }

  .dropdown {
    background: rgba(45, 45, 45, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .dropdown-item:hover {
    background: rgba(61, 61, 61, 0.8);
  }

  .dropdown-item.active {
    background: rgba(54, 54, 54, 0.8);
  }

  .search-box input {
    color: #fff;
  }

  .search-box input::placeholder {
    color: #888;
  }

  .search-box button {
    color: #bbb;
  }

  .search-box button:hover {
    color: #4a90e2;
  }
}

/* 移动端适配 */
@media (max-width: 576px) {
  .search-wrapper {
    width: 95%;
  }

  .search-box {
    padding: 0.3rem;
  }

  .search-box input {
    font-size: 0.9rem;
  }

  .dropdown-item {
    padding: 0.4rem 0.8rem;
  }
}
</style>
